<template>
	<view class="integrate">
	 	<view class="integrates">
	 		<view class="top">
	 			个人积分
	 		</view>
			<view class="cont">
				<view class="item" v-for="(item,index) in list" :key="index" :style="index===1 ?'border-left: 1rpx solid #f2f2f2; border-right:1rpx solid #f2f2f2 ;':''">
				<image class="item-image" :src="item.image" mode=""></image>
				<text class="item-text1">{{item.num}}</text>
				<text class="item-text2">{{item.text}}</text>
				</view>
			</view>
	 	</view>
	</view>
</template>

<script>
	export default {
		name:"integrate",
		data() {
			return {
				list:[
					{id:0,image:"../../static/home/积分 (1).png",num:10000,text:"我的环保积分"},
					{id:1,image:"../../static/home/ZS评价次数.png",num:546,text:"投递次数"},
					{id:2,image:"../../static/home/奖牌排名.png",num:10,text:"环保积分排名"}
				]
			};
		}
	}
</script>

<style lang="less" scoped>
.integrate{
	display: flex;
	justify-content: center;
	width: 710rpx;
	height: 210rpx;
	background-color: #00c783;
	border-radius: 10rpx;
}
.integrates{
	position: relative;
	margin-top: 4rpx;
	width: 704rpx;
	height: 200rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.top{
	height: 52rpx;
	width: 100%;
	line-height: 52rpx;
	margin-left: 30rpx;
}
.top::before{
	content: '';
	position: absolute;
	display: inline-block;
	background-color: #00c783;
	width: 6rpx;
	height: 26rpx;
	top: 16rpx;
	left: 12rpx;
	border-radius: 10rpx;
}
.cont{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 148rpx;
}
.item{
	display: flex;
	flex: 1;
    flex-direction: column;
	justify-content: center;
	align-items: center;
}
.item-image{
	width: 42rpx;
	height: 48rpx;
	
}
.item-text1{
	padding-top: 10rpx;
}
.item-text2{
	padding-top: 5rpx;
	font-size: 24rpx;
	color: #9b9b9b;
}
</style>